<template>
  <div id="login">
    <!--<video preload="auto" class="me-video-player" autoplay="autoplay" loop="loop">
          <source src="../../static/vedio/sea.mp4" type="video/mp4">
      </video>-->

    <div class="me-login-box me-login-box-radius">
      <h1>找帮帮 登录</h1>

      <el-form ref="userForm" :model="userForm" :rules="rules">
        <el-form-item prop="studentId">
          <el-input placeholder="学号" v-model="userForm.studentId"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input placeholder="密码" type="password" v-model="userForm.password"></el-input>
        </el-form-item>

        <el-form-item size="small" class="me-login-button">
          <el-button type="primary" @click.native.prevent="login('userForm')" >登录</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
export default {
  name: "LoginIndex",
  data() {
    return {
      fullscreenLoading: false,
      userForm: {
        studentId: '',
        password: ''
      },
      rules: {
        studentId: [
          {required: true, message: '请输入学号', trigger: 'blur'},
          {max: 21, message: '不能大于21个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {max: 21, message: '不能大于21个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    login(formName) {
      let that = this

      this.$refs[formName].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '登录中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          that.$store.dispatch('ReqLogin', that.userForm).then(() => {
            let goPath = this.$route.query.redirect||'/home';
            //跳转到首页
            this.$router.push(goPath);
            loading.close();
            that.$message({message: '登陆成功', type: 'success', showClose: true});
          }).catch((error) => {
            if (error !== 'error') {
              that.$message({message: error.data.error_description, type: 'error', showClose: true});
              loading.close();
            }
          })
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>

#login {
  min-width: 100%;
  min-height: 100%;
}


.me-login-box {
  position: absolute;
  width: 300px;
  height: 260px;
  background-color: white;
  margin-top: 150px;
  margin-left: -180px;
  left: 50%;
  padding: 30px;
}

.me-login-box-radius {
  border-radius: 10px;
  box-shadow: 0px 0px 1px 1px rgba(161, 159, 159, 0.1);
}

.me-login-box h1 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  vertical-align: middle;
}


.me-login-button {
  text-align: center;
}

.me-login-button button {
  width: 100%;
}
</style>
